/*
 * @LastEditors: 七七
 * @Date: 2023-01-07 15:25:09
 */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail/Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };

  // todo 编程式路由导航
  replaceShow = (id, title) => {
    // replace跳转+params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // replace跳转+search(query)参数
    // this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)

    // replace跳转+state参数
    this.props.history.replace(`/home/message/detail/`, { id, title });
  };

  pushShow = (id, title) => {
    // push跳转+params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // push跳转+search参数
    // this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)

    // push跳转+state参数
    this.props.history.push(`/home/message/detail/`, { id, title });
  };

  back = () => {
    this.props.history.goBack();
  };

  forward = () => {
    this.props.history.goForward();
  };

  go = () => {
    this.props.history.go(-2);
  };

  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 路由链接 */}
                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}
                {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: msgObj.id, title: msgObj.title },
                  }}
                >
                  {msgObj.title}
                </Link>
                &nbsp;
                <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>
                  push查看
                </button>
                &nbsp;
                <button
                  onClick={() => this.replaceShow(msgObj.id, msgObj.title)}
                >
                  replace查看
                </button>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* 注册路由 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
        <Route path="/home/message/detail" component={Detail} />
        <button onClick={this.back}>回退</button>&nbsp;
        <button onClick={this.forward}>前进</button>&nbsp;
        <button onClick={this.go}>go</button>
      </div>
    );
  }
}
